<template>
  <ScreenLayoutWithMenu title="系统监控大屏">
    <div class="screen-grid grid-2x3">
      <ChartCard title="系统负载趋势" grid-area="a">
        <ECharts :option="systemLoadOption" />
      </ChartCard>
      <ChartCard title="服务器状态" grid-area="b">
        <ECharts :option="serverStatusOption" />
      </ChartCard>
      <ChartCard title="系统指标" grid-area="c">
        <div class="kpi-container">
          <div class="kpi-item">
            <div class="kpi-label">CPU使用率</div>
            <div class="kpi-value">65.8%</div>
            <div class="kpi-change positive">正常</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">内存使用率</div>
            <div class="kpi-value">72.3%</div>
            <div class="kpi-change positive">正常</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">磁盘使用率</div>
            <div class="kpi-value">45.2%</div>
            <div class="kpi-change positive">正常</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="网络流量" grid-area="d">
        <ECharts :option="networkOption" />
      </ChartCard>
      <ChartCard title="错误日志统计" grid-area="e">
        <ECharts :option="errorLogOption" />
      </ChartCard>
      <ChartCard title="服务健康度" grid-area="f">
        <ECharts :option="healthOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const systemLoadOption = ref({})
const serverStatusOption = ref({})
const networkOption = ref({})
const errorLogOption = ref({})
const healthOption = ref({})

onMounted(() => {
  const hours = Array.from({ length: 24 }, (_, i) => `${i}时`)
  
  systemLoadOption.value = getLineOption({
    categories: hours,
    series: [{
      name: '负载',
      data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 30) + 50)
    }]
  })

  serverStatusOption.value = getBarOption({
    categories: ['正常', '警告', '异常'],
    series: [{
      name: '服务器数',
      data: [85, 10, 2]
    }]
  })

  networkOption.value = getLineOption({
    categories: hours,
    series: [{
      name: '流量(MB)',
      data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 1000) + 500)
    }]
  })

  errorLogOption.value = getBarOption({
    categories: ['错误', '警告', '信息'],
    series: [{
      name: '日志数',
      data: [15, 120, 500]
    }]
  })

  healthOption.value = getPieOption({
    name: '服务状态',
    data: [
      { value: 90, name: '健康' },
      { value: 7, name: '警告' },
      { value: 3, name: '异常' }
    ]
  })
})
</script>
